<form name="form" ng-init="vm.init();refresh();" ng-submit="vm.format(form.$valid)" novalidate>
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">TEXT 格式化</div>
      <div class="pull-right">
        <button class="btn btn-primary" type="submit" ng-disabled="form.$invalid">格式化</button>
        <button id="copy" class="btn btn-success" type="button" data-clipboard-action="copy"
            ng-disabled="vm.code == ''">复制</button>
        <button class="btn btn-danger" type="button" ng-click="vm.reset()">重置</button>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div ng-class="{'col-md-2': vm.showConfig, 'hidden': !vm.showConfig}">
      <fieldset>
        <legend>配置项（<a href="javascript:void(0)" class="x-link" ng-click="vm.showConfig = false">隐藏</a>）</legend>
        <div class="x-page-scope">
          <label class="control-label">全局</label>
          <div class="form-group">
            <div class="input-group input-group-sm">
              <span class="input-group-addon">数据类型</span>
              <select class="form-control" ng-model="vm.dataType"
                  ng-options="dataType as dataType.label for dataType in vm.dataTypes">
              </select>
            </div>
          </div>
          <div class="form-group">
            <div class="input-group input-group-sm">
              <span class="input-group-addon">打印线宽度</span>
              <input type="number" min="0" class="form-control" ng-model="vm.config.printWidth">
            </div>
          </div>
          <div class="form-group">
            <div class="input-group input-group-sm">
              <span class="input-group-addon">Tab宽度</span>
              <input type="number" min="0" class="form-control" ng-model="vm.config.tabWidth">
            </div>
          </div>
          <div class="form-group">
            <label class="checkbox-inline">
              <input type="checkbox" ng-model="vm.config.useTabs">使用Tab键
            </label>
          </div>
          <label class="control-label">共通</label>
          <div class="form-group">
            <label class="checkbox-inline">
              <input type="checkbox" ng-model="vm.config.singleQuote">使用单引号
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-inline">
              <input type="checkbox" ng-model="vm.config.bracketSpacing">保留括号两端空格
            </label>
          </div>
          <div class="form-group">
            <div class="input-group input-group-sm">
              <span class="input-group-addon">文本换行</span>
              <select class="form-control" ng-model="vm.config.proseWrap">
                <option value="always">Always</option>
                <option value="never">Never</option>
                <option value="preserve">Preserve</option>
              </select>
            </div>
          </div>
          <label class="control-label">JavaScript</label>
          <div class="form-group">
            <label class="checkbox-inline">
              <input type="checkbox" ng-model="vm.config.semi">包含分号
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-inline">
              <input type="checkbox" ng-model="vm.config.jsxSingleQuote">JSX中使用单引号
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-inline">
              <input type="checkbox" ng-model="vm.config.jsxBracketSameLine">JSX中括号在同一行
            </label>
          </div>
          <div class="form-group">
            <div class="input-group input-group-sm">
              <span class="input-group-addon">允许括号</span>
              <select class="form-control" ng-model="vm.config.arrowParens">
                <option value="avoid">Avoid</option>
                <option value="always">Always</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <div class="input-group input-group-sm">
              <span class="input-group-addon">末尾逗号</span>
              <select class="form-control" ng-model="vm.config.trailingComma">
                <option value="none">None</option>
                <option value="es5">ES5</option>
                <option value="all">All</option>
              </select>
            </div>
          </div>
          <label class="control-label">HTML</label>
          <div class="form-group">
            <div class="input-group input-group-sm">
              <span class="input-group-addon">HTML空白敏感度</span>
              <select class="form-control" ng-model="vm.config.htmlWhitespaceSensitivity">
                <option value="css">CSS</option>
                <option value="strict">Strict</option>
                <option value="ignore">Ignore</option>
              </select>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
    <div ng-class="{'col-md-5': vm.showConfig, 'col-md-6': !vm.showConfig}">
      <fieldset>
        <legend>源数据<span ng-show="!vm.showConfig">（<a href="javascript:void(0)" class="x-link"
            ng-click="vm.showConfig = true">显示配置项</a>）</span></legend>
        <div class="x-page-scope">
          <textarea class="form-control" name="data" ng-model="vm.data" required autofocus
              ng-class="{'x-invalid': form.$submitted && form.data.$invalid}"></textarea>
        </div>
      </fieldset>
    </div>
    <div ng-class="{'col-md-5': vm.showConfig, 'col-md-6': !vm.showConfig}">
      <fieldset>
        <legend>目标数据<font color="red">（行号栏会显示校验信息）</font></legend>
        <div class="x-page-scope">
          <div class="x-editor" ng-show="vm.error == ''">
            <pre class="x-output" id="data-editor"></pre>
          </div>
          <pre class="alert alert-danger" ng-if="vm.error">{{vm.error}}</pre>
        </div>
      </fieldset>
    </div>
  </div>
</form>
